<template>
	<div>
		<Roof>
			<div>登录</div>
		</Roof>

		<div class="box">
			<van-form @submit="onSubmit">
					  <van-field
					    v-model="username"
					    name="用户名"
					    label="用户名"
					    placeholder="请输入6到10位的用户名"
						:maxlength='10'
					    :rules="[{ required: true, message: '请填写用户名' },{  pattern: /\d{6}/, message: '请输入6到10位的用户名' }]"
					  />
					  <van-field
					    v-model="password"
					    type="password"
					    name="密码"
					    label="密码"
						:maxlength='10'
					    placeholder="请输入6到10位的密码"
					    :rules="[{ required: true, message: '请填写密码' },{  pattern: /\d{6}/, message: '请输入6到10位的密码' }]"
					  />
					  <div style="margin: 16px;">
					    <van-button round block type="info" native-type="submit" color="#A32F2A">登录</van-button>
					  </div>
					</van-form>
					
					<div class="footer"><span @click="goLogon">快速注册</span></div>
		</div>

	</div>
</template>

<script>
	import Roof from '@/components/common/Roof';
	import {mapMutations,mapActions} from 'vuex'

	export default {
		neme: 'Login',
		data() {
			return {
				username: '',
				password: '',
			}
		},
		components: {Roof},
		methods: {
		    onSubmit(values) {
				
				const users = JSON.parse(decodeURIComponent(window.atob(localStorage.getItem("users"))))
				
				//判断用户名是否存在
				const panduan = users.some(item=>{
					return item.username == values.username
				})
				
				if(panduan) {
					alert('登录成功')
					this.$store.dispatch('users/addCart',values.username)
					this.$router.push({name:'my'})
				}
				
				console.log('submit', values);
		    },
			//跳转到注册页
			goLogon() {
				this.$router.push({name:'logon'})
			}
		  },
	}
</script>

<style scoped>
	.box {
		margin-top: 30px;
		padding: 30px;
	}
	.footer {
		margin-top: 1.5625rem;
		text-align: center;
		font-size: 15px;
		/* margin-left: 50%;
		transform: translate(-50%); */
	}
</style>
